"use client";

import localFont from "next/font/local";
import "./globals.css";
import { useRef, useEffect, useState, RefObject } from "react";
import { BodyRefProvider } from "./rou-context";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const bodyRef = useRef<HTMLBodyElement>(null);
  const [dodtE, setBodtE] = useState<RefObject<HTMLBodyElement> | null>(null);

  useEffect(() => {
    setBodtE(bodyRef)
  }, [bodyRef]);
  return (
    <html>
      <body
        ref={bodyRef}
        style={{ backgroundColor: "black", color: "white" }}
        className={`${geistSans.variable} ${geistMono.variable}`}
      >
        <BodyRefProvider
          children={children}
          refBody={dodtE}
        ></BodyRefProvider>
      </body>
    </html>
  );
}
